<template>
    <div class="dashboard-editor-container">
        <el-row :gutter="40" class="panel-group">
            <el-col  v-for="(item,index) in Object.keys(orderMap)" :xs="12" :sm="12" :lg="6" class="card-panel-col">
                <panel-group :total="sumTotal(orderMap[item])" :title="'本月'+item" icon="el-icon-s-marketing
" @handleSetLineChartData="handleSetLineChartData('当日'+item,orderMap[item])"/>
            </el-col>


                <el-col :key="index" v-for="(item,index) in Object.keys(userMap)" :xs="12" :sm="12" :lg="6" class="card-panel-col">
                    <panel-group  :total="sumTotal(userMap[item])" :title="'本月'+item" icon="el-icon-user-solid
" @handleSetLineChartData="handleSetLineChartData('当日'+item,userMap[item])"/>
                </el-col>


        </el-row>


        <el-row style="background:#fff;padding:16px 16px 0;margin-top:32px;">
            <line-chart v-if="lineChartData" :chart-data="lineChartData"/>
        </el-row>

        <!--    <el-row :gutter="32">-->
        <!--      <el-col :xs="24" :sm="24" :lg="8">-->
        <!--        <div class="chart-wrapper">-->
        <!--          <raddar-chart />-->
        <!--        </div>-->
        <!--      </el-col>-->
        <!--      <el-col :xs="24" :sm="24" :lg="8">-->
        <!--        <div class="chart-wrapper">-->
        <!--          <pie-chart />-->
        <!--        </div>-->
        <!--      </el-col>-->
        <!--      <el-col :xs="24" :sm="24" :lg="8">-->
        <!--        <div class="chart-wrapper">-->
        <!--          <bar-chart />-->
        <!--        </div>-->
        <!--      </el-col>-->
        <!--    </el-row>-->

        <!--    <el-row :gutter="8">-->
        <!--      <el-col :xs="{span: 24}" :sm="{span: 24}" :md="{span: 24}" :lg="{span: 12}" :xl="{span: 12}" style="padding-right:8px;margin-bottom:30px;">-->
        <!--        <transaction-table />-->
        <!--      </el-col>-->
        <!--      <el-col :xs="{span: 24}" :sm="{span: 12}" :md="{span: 12}" :lg="{span: 6}" :xl="{span: 6}" style="margin-bottom:30px;">-->
        <!--        <todo-list />-->
        <!--      </el-col>-->
        <!--      <el-col :xs="{span: 24}" :sm="{span: 12}" :md="{span: 12}" :lg="{span: 6}" :xl="{span: 6}" style="margin-bottom:30px;">-->
        <!--        <box-card />-->
        <!--      </el-col>-->
        </el-row>
    </div>
</template>

<script>
import PanelGroup from './components/PanelGroup'
import LineChart from './components/LineChart'
// import RaddarChart from './components/RaddarChart'
// import PieChart from './components/PieChart'
// import BarChart from './components/BarChart'
// import TransactionTable from './components/TransactionTable'
// import TodoList from './components/TodoList'
// import BoxCard from './components/BoxCard'

// const lineChartData = {
//     orderData: {},
//     newVisitis: {
//         expectedData: [100, 120, 161, 134, 105, 160, 165],
//         actualData: [120, 82, 91, 154, 162, 140, 145]
//     },
//     messages: {
//         expectedData: [200, 192, 120, 144, 160, 130, 140],
//         actualData: [180, 160, 151, 106, 145, 150, 130]
//     },
//     purchases: {
//         expectedData: [80, 100, 121, 104, 105, 90, 100],
//         actualData: [120, 90, 100, 138, 142, 130, 130]
//     },
//     shoppings: {
//         expectedData: [130, 140, 141, 142, 145, 150, 160],
//         actualData: [120, 82, 91, 154, 162, 140, 130]
//     }
// }

import {sum} from "@/api/sum";

export default {
    name: 'DashboardAdmin',
    components: {
        PanelGroup,
        LineChart,
        // RaddarChart,
        // PieChart,
        // BarChart,
        // TransactionTable,
        // TodoList,
        // BoxCard
    },
    created() {
        sum().then(res=>{
            this.orderMap = res.extra.orderMap
            this.userMap = res.extra.userMap
        })
    },
    data() {
        return {
            orderMap: {},
            userMap: {},
            lineChartData: null
        }
    },
    methods: {
        handleSetLineChartData(type,map) {
            let res = {}
            res[type] = map
            this.lineChartData = res
        },
        sumTotal(map){
            return Object.values(map).reduce((total,item)=>{
               return total+item
            },0)
        }
    }
}
</script>

<style lang="scss" scoped>
.card-panel-col{
    margin-bottom: 20px
}

.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .github-corner {
    position: absolute;
    top: 0px;
    border: 0;
    right: 0;
  }

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

@media (max-width: 1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>
